<template>
	<view class="pageIndex">
		<view class="fixedTop">
			<!-- #ifdef MP-WEIXIN -->
			<u-status-bar></u-status-bar>
			<view class="topPad" style="height: 88rpx;"></view>
			<!-- #endif -->
			<view class="searchBar">
				<image class="fdj" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon1.png"
					mode="scaleToFill">
				</image>
				<input class="inp" placeholder="输入笔记编号搜索" border="none" v-model.trim="parameter.title"
					@confirm="confirm"></input>
				<view class="btn" @click="confirm">搜索</view>
			</view>
		</view>

		<view v-if="workMsgData.user" class="notice">
			<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon20.png" mode="scaleToFill">
			</image>
			<u-notice-bar :text="`${workMsgData.user.nickname}送出了${workMsgData.send_flower}朵鲜花`" mode="link"
				:url="`/pages/index/activityInfo?id=${workMsgData.activity_id}`" bgColor="rgba(255,255,255,0.00);"
				color="#333333" fontSize="28rpx" style="flex: 1;"></u-notice-bar>
		</view>

		<view class="banner-box">
			<u-swiper :list="bannerList" keyName="img" @click="clickBanner" height="146" radius="10" interval="5000"
				circular></u-swiper>
		</view>

		<!-- <button open-type="openWebcastRoom" bindopenwebcastroom="eventHandler" data-aweme-id="36485946026">
			跳转抖音直播间
		</button> -->

		<view class="scroll-list">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
				<view :class="['item',v.id == parameter.category_id ? 'xz': '']" v-for="(v,i) in CategoryList" :key="i"
					@click="switchCut(v)">
					<view class="name">{{v.title}}</view>
					<text></text>
				</view>
			</scroll-view>
		</view>

		<view class="grid-box">
			<view class="grid">
				<view class="grid-item" v-for="(v,i) in WorkList1" :key="i" @click="goTo(v)">
					<view class="activityT">
						<u-icon v-if="v.is_in_activity" name="tags-fill" :color="v.activity_label_color"
							size="28"></u-icon>
					</view>
					<image class="cover-img" :src="v.image" mode="aspectFill"></image>
					<view class="msg">
						<view class="title u-line-2">
							{{v.title}}
						</view>
						<view class="info">
							<view class="left">
								<image :src="v.user.avatar" mode="scaleToFill"></image>
								<text class="u-line-1">{{v.user.nickname}}</text>
							</view>
							<view class="right">
								<image v-if="true"
									src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerT.png"
									mode="scaleToFill"></image>
								<image v-else
									src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerF.png"
									mode="scaleToFill"></image>
								<text>{{v.flower_num | million}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="grid">
				<view class="grid-item" v-for="(v,i) in WorkList2" :key="i" @click="goTo(v)">
					<view class="activityT">
						<u-icon v-if="v.is_in_activity" name="tags-fill" :color="v.activity_label_color"
							size="28"></u-icon>
					</view>
					<image class="cover-img" :src="v.image" mode="aspectFill"></image>
					<view class="msg">
						<view class="title u-line-2">
							{{v.title}}
						</view>
						<view class="info">
							<view class="left">
								<image :src="v.user.avatar" mode="scaleToFill"></image>
								<text class="u-line-1">{{v.user.nickname}}</text>
							</view>
							<view class="right">
								<image v-if="true"
									src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerT.png"
									mode="scaleToFill"></image>
								<image v-else
									src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerF.png"
									mode="scaleToFill"></image>
								<text>{{v.flower_num | million}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifndef H5 -->
		<image class="getGift" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/getGift.png"
			mode="scaleToFill" @click="getGift"></image>
		<!-- #endif -->
		<g-tab-bar :select="0"></g-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, // 1作品 2博主
				parameter: {
					title: "", //true	string		口令/名称 搜索字段
					category_id: "", //false	int		分类id
					page: 1, //true	int		当前页
					size: 10, //true	int		每页多少条
					// #ifdef MP-TOUTIAO
					auth_type: 1, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
					// #ifdef MP-WEIXIN
					auth_type: 2, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
					// #ifdef H5
					auth_type: 4, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
				},
				bannerList: [],
				CategoryList: [],
				WorkList1: [],
				WorkList2: [],
				total: 0,
				is_examine: 0,
				workMsgData: {},
				// #ifndef H5
				rewardedVideoAd: null,
				isAdLoaded: false,
				// #endif
			}
		},
		onShow() {
			this.getConfig()
			// #ifdef MP-TOUTIAO
			this.createRewardedVideoAd()
			// #endif
			this.workMessage()
		},
		onHide() {
			// 销毁广告实例
			// // #ifdef MP-TOUTIAO
			// this.destroyRewardedVideoAd()
			// // #endif
		},
		onLoad(options) {
			console.log('邀请参数', options);
			if (options.referee_id) {
				uni.setStorageSync("referee_id", options.referee_id);
			}
			if (uni.getStorageSync('token')) {
				this.$store.dispatch("messageList")
			}
			this.workCategory()
			this.getWorkList()
			this.getbannerList()
			// #ifdef MP-WEIXIN
			this.createRewardedVideoAd()
			// #endif
		},
		methods: {
			// eventHandler(e) {
			// 	console.log(e);
			// 	if (e.detail.errNo) {
			// 		console.log("跳转抖音直播间失败", e.detail);
			// 	} else {
			// 		console.log("跳转抖音直播间成功");
			// 	}
			// },
			// 获取最近的一条赠送礼物消息
			async workMessage() {
				let res = await this.$http("api/common/workMessage")
				if (res.code == 200) {
					this.workMsgData = res.result
				}
			},
			getGift() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '观看广告成功获取100朵鲜花礼物',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							});
							this.showRewardedVideoAd()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			destroyRewardedVideoAd() {
				if (this.rewardedVideoAd) {
					this.rewardedVideoAd.destroy();
					this.rewardedVideoAd = null;
					console.log('激励视频广告实例已销毁');
				}
			},
			createRewardedVideoAd() {
				if (this.rewardedVideoAd) return
				// 创建激励视频广告实例
				// #ifdef MP-TOUTIAO
				this.rewardedVideoAd = uni.createRewardedVideoAd({
					adUnitId: 'oxvvzktysai1qc37hc'
				});
				// #endif
				// #ifdef MP-WEIXIN
				this.rewardedVideoAd = uni.createRewardedVideoAd({
					adUnitId: 'adunit-fd593fffc9fb34fc'
				});
				// #endif

				// 监听广告加载事件
				this.rewardedVideoAd.onLoad(() => {
					this.isAdLoaded = true;
					console.log('激励视频广告加载成功');
				});

				// 监听广告错误事件
				this.rewardedVideoAd.onError(err => {
					console.error('激励视频广告加载失败', err);
				});

				// 监听广告关闭事件
				this.rewardedVideoAd.onClose(res => {
					// console.log(res, 66);
					if (res && res.isEnded) {
						this.adReport()
					} else {
						console.log('用户未完整观看激励视频广告');
						uni.showToast({
							title: "观看视频中断",
							icon: 'none'
						})
					}
					// this.isAdLoaded = false;
				});
			},
			showRewardedVideoAd() {
				if (this.isAdLoaded) {
					this.rewardedVideoAd.show().catch(err => {
						console.error('激励视频广告展示失败', err);
						// 如果广告未加载成功，可以重新加载
						this.rewardedVideoAd.load();
					});
				} else {
					console.log('激励视频广告未加载完成');
				}
				uni.hideLoading();
			},
			// 广告上报
			async adReport() {
				let res = await this.$http("api/work/adReport", {
					id: 0,
					// #ifdef MP-TOUTIAO
					type: 1,
					// #endif
					// #ifdef MP-WEIXIN
					type: 2,
					// #endif
				})
				if (res.code == 200) {
					uni.showToast({
						title: "获取礼物成功！",
						icon: 'none',
						duration: 2000
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 获取系统配置
			async getConfig() {
				let res = await this.$http("api/common/getConfig")
				// console.log(res);
				if (res.code == 200) {
					if (getApp().globalData.platform == "mp-weixin" && res.result.is_examine == 1) {
						this.is_examine = 1
					} else {
						this.is_examine = 0
					}
					uni.setStorageSync("is_examine", this.is_examine)
				}
			},
			// 轮播图列表
			async getbannerList() {
				let res = await this.$http("api/work/bannerList", {}, "GET")
				// console.log(res);
				if (res.code == 200) {
					this.bannerList = res.result
				}
			},
			// 前往详情页面
			async goTo(data) {
				// console.log(data);
				let res = await this.$http("api/work/getWorkInfo", {
					id: data.id
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					// #ifdef MP-TOUTIAO
					this.destroyRewardedVideoAd()
					// #endif
					if (res.result.is_unlock) {
						this.navigateTo(`/pages/index/content?id=${res.result.id}`)
					} else {
						this.navigateTo(`/pages/index/unlock?id=${res.result.id}`)
					}
				}
			},
			//作品列表
			async getWorkList() {
				let res = await this.$http("api/work/getWorkList", this.parameter, "GET")
				
				if(res.code == 200){
					let list1 = []
					let list2 = []
					
					res.result.data.map((v,i) => {
						if ((i + 1) % 2 === 0) {
							list2.push(v)
						} else {
							list1.push(v)
						}
					})
					// this.WorkList = this.WorkList.concat(res.result.data)
					this.WorkList1 = this.WorkList1.concat(list1)
					this.WorkList2 = this.WorkList2.concat(list2)
					this.total = res.result.total
				}
				
			},
			//作品分类列表
			async workCategory() {
				let res = await this.$http("api/work/workCategory", {}, "GET")
				// console.log(res);
				uni.setStorageSync("category", res.result)
				res.result.unshift({
					title: "精选",
					id: "",
				})
				this.CategoryList = res.result
			},
			//切换分类
			switchCut(value) {
				this.parameter.category_id = value.id
				this.parameter.page = 1
				this.WorkList1 = []
				this.WorkList2 = []
				this.getWorkList()
			},
			// 确认搜索
			confirm() {
				if (this.parameter.title) {
					// #ifdef MP-TOUTIAO
					this.destroyRewardedVideoAd()
					// #endif
					this.navigateTo(`/pages/index/search?title=${this.parameter.title}`)
				} else {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
				}
				return
				// this.parameter.page = 1
				// this.WorkList = []
				// this.getWorkList()
			},
			// 点击轮播图
			clickBanner(index) {
				if (this.bannerList[index].type == 1) {
					// #ifdef MP-TOUTIAO
					this.destroyRewardedVideoAd()
					// #endif
					this.navigateTo(`/pages/index/activityInfo?id=${this.bannerList[index].jump_id}`)
				}
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.parameter.page = 1
			this.WorkList1 = []
			this.WorkList2 = []
			this.getWorkList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if ((this.WorkList1.length + this.WorkList2.length) >= this.total) return
			this.parameter.page += 1
			this.getWorkList()
		}
	}
</script>
<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.pageIndex {
		// #ifdef MP-WEIXIN
		padding: 290rpx 32rpx 185rpx;
		// #endif
		// #ifndef MP-WEIXIN
		padding: 110rpx 32rpx 185rpx;
		// #endif
		background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/indexBack.png") no-repeat;
		background-size: 100% auto;

		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			// background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/indexBack.png") no-repeat;
			// background-size: 100% auto;
			padding: 16rpx 32rpx 24rpx;
			box-sizing: border-box;

			.searchBar {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// width: 686rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				border: 2rpx solid #1F1F1F;

				.fdj {
					width: 40rpx;
					height: 40rpx;
					margin: 0 8rpx 0 24rpx;
				}

				.inp {
					flex: 1;
					margin: 0 8rpx;
					font-weight: 500;
					font-size: 24rpx;

					.input-placeholder {
						font-weight: 500;
						font-size: 24rpx;
						color: #B6B6B6;
					}
				}

				.btn {
					width: 80rpx;
					height: 52rpx;
					line-height: 52rpx;
					background: #1F1F1F;
					border-radius: 26rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #D1FF23;
					text-align: center;
					margin-right: 6rpx;
				}
			}
		}

		.notice {
			display: flex;
			align-items: center;
			position: fixed;
			// #ifdef MP-TOUTIAO
			top: 80rpx;
			// #endif
			// #ifdef MP-WEIXIN
			top: 262rpx;
			// #endif
			// #ifdef H5
			top: 84rpx;
			// #endif
			left: 0;
			width: 100%;
			z-index: 999;
			background-color: rgba(255, 255, 255, 0.5);

			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 16rpx;
			}

			.u-notice-bar {
				flex: 1;

				::v-deep .u-notice__left-icon {
					display: none;
				}
			}

		}

		.banner-box {
			// padding-top: 24rpx;
		}

		.scroll-list {
			padding: 32rpx 0;

			.scroll-tab {
				display: flex;
				white-space: nowrap;

				.item {
					display: inline-flex;
					margin-right: 12rpx;

					.name {
						padding: 0 38rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 30rpx;
						background: #EBEBEB;
						font-weight: bold;
						font-size: 32rpx;
						color: #B8B8B8;
					}
				}

				.xz {
					position: relative;
					height: 72rpx;

					.name {
						font-weight: 800;
						color: #D1FF23;
						background-color: #343434;
					}

					text {
						position: absolute;
						display: block;
						bottom: -20rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 0;
						height: 0;
						border: 22rpx solid;
						border-color: #343434 transparent transparent transparent;
					}
				}
			}
		}

		.grid-box {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 18rpx;
			// grid-row-gap: 16rpx;
		}

		.grid {
			column-count: 1;

			// display: grid;
			// grid-template-columns: repeat(1, 1fr);
			// grid-column-gap: 18rpx;
			// grid-row-gap: 16rpx;

			.grid-item {
				break-inside: avoid;
				margin-bottom: 16rpx;

				// width: 334rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 8rpx;
				box-sizing: border-box;
				position: relative;

				.activityT {
					position: absolute;
					top: 14rpx;
					left: 10rpx;
					z-index: 9;
					width: 40rpx;
					height: 40rpx;
				}

				.cover-img {
					display: block;
					width: 100%;
					height: 392rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.msg {
					width: 100%;

					.title {
						font-weight: bold;
						font-size: 24rpx;
						line-height: 36rpx;
						color: #333333;
						letter-spacing: 2rpx;
						padding: 8rpx;
					}

					.info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 8rpx;

						.left {
							display: flex;
							align-items: center;

							image {
								width: 32rpx;
								height: 32rpx;
								border-radius: 50%;
							}

							text {
								padding-left: 8rpx;
								font-weight: bold;
								font-size: 20rpx;
								color: #8D8F90;
							}
						}

						.right {
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 24rpx;
							}

							text {
								font-weight: bold;
								font-size: 20rpx;
								color: #8D8F90;
								padding-left: 8rpx;
							}
						}
					}
				}
			}
		}

		.getGift {
			position: fixed;
			right: 32rpx;
			bottom: 300rpx;
			z-index: 99;
			width: 188rpx;
			height: 206rpx;
		}
	}
</style>